<template>
    <div class="register">
        <div class="top">
            <img src="../../assets/login/forget.png" alt />
        </div>
        <div class="loginForm">
            <div class="inp-div">
                <p class="icon">
                    <img src="../../assets/login/account.png" alt />
                </p>
                <div class="inp-box">
                    <input type="text" v-model="user.phone" :placeholder="$t('ws_login.enterTel')" class="normal-inp" />
                </div>
            </div>
            <div class="inp-div">
                <p class="icon">
                    <img src="../../assets/login/Verification.png" alt />
                    
                </p>
                <div class="inp-box">
                    <input type="text" v-model.number="user.msgCode" :placeholder="$t('ws_login.enterVerificationCode')" class="normal-inp have-btn"  />
                    <button :class="{'disbaled' : btnLock}" :disabled="btnLock" @click="getCode" class="getCode">{{btnContent}}</button>
                </div>
            </div>
            <div class="inp-div">
                <p class="icon">
                    <img src="../../assets/login/secret.png" alt />
                </p>
                <div class="inp-box">
                    <input type="password" v-model="user.pwd" :placeholder="$t('ws_sign.enterPsdd')" class="normal-inp" />
                </div>
            </div>
            <div class="inp-div">
                <p class="icon">
                    <img src="../../assets/login/secret.png" alt />
                </p>
                <div class="inp-box">
                    <input type="password" v-model="user.pwdCheck" :placeholder="$t('ws_sign.enterNew')" class="normal-inp" />
                </div>
            </div>
        </div>
        <button class="resister" @click="submit">{{$t('ws_sign.complete')}}</button>
      
    </div>
</template>

<script>
import { getcodes } from '@/api/getData';
import {forgetpwd} from '@/api/getData';
export default {
    data() {
        return {
            user: {
                pwd: "",
                phone: "",
                msgCode: "",
                pwdCheck: ""
            },
            timerVal: null,
            time: 60,
            saveGetNum: 0,
            btnContent:this.$t('ws_login.getVerificationCode'),
            btnLock : false

        };
    },
    methods: {
        getCode() {
            let phoneReg = /^1\d{10}$/;
            if (this.user.phone.trim() == "") {
                 if(localStorage.lang == 'cn'){
                    this.$message.warning('手机号不能为空');
                }else{
                     this.$message.warning('Phone number cannot be empty');
                } 
                return false;
            } else if (!phoneReg.test(this.user.phone)) {
                if(localStorage.lang == 'cn'){
                   this.$message.warning('手机号格式不正确');
                }else{
                     this.$message.warning('Phone format is incorrect');
                } 
                return false;
            }

            let data = {
                phone: this.user.phone,
            }
            getcodes(data).then(res => {
                if(res.data.suc){
                        this.saveGetNum = res.data.result;
                        this.btnLock = true;
                        this.timerVal = setInterval(() => {
                            if (this.time <= 0) {
                                clearInterval(this.timerVal);
                                this.time = 60;
                                if(localStorage.lang == 'cn'){
                                this.btnContent ="获取验证码";
                                }else{
                                    this.btnContent ="getVerificationCode";
                                } 
                                this.btnLock = false;
                            } else {
                                if(localStorage.lang == 'cn'){
                                    this.btnContent = '重新获取(' + this.time + '秒)';
                                    }else{
                                        this.btnContent = 'Reacquire(' + this.time + 'second)';
                                    } 
                                this.time -= 1;
                            }
                        }, 1000);
                }else{
                    this.$message({
						type: 'error',
						message: res.data.msg,
						duration: 1500,
						showClose: true
					});    

                }
            })

        },
        submit(){
            if (this.saveGetNum - 0 !== this.user.msgCode - 0) {
                
                if(localStorage.lang == 'cn'){
                 this.$message("验证码输入有误");
                }else{
                     this.$message("Verification code input is incorrect");
                }
                return false;
            }
            if (this.user.pwd  != this.user.pwdCheck) {
                if(localStorage.lang == 'cn'){
                this.$message("密码输入有误，请重新输入")}else{
                    this.$message("The password was entered incorrectly. Please re-enter")
                };
                return false;
            }

            let data = {
                user_id: this.user.phone,
                pwd:this.user.pwd
            }
            forgetpwd(data).then(res=>{
                if(res.data.result==200){
                    this.$message({
                        type:'success',
                        message:res.data.msg,
                        duration:1500,
                        showClose:true
                    });
                    this.$router.push("/")
                }else{
                    this.$message({
                        type:'error',
                        message:res.data.msg,
                        duration:1500,
                        showClose:true
                    });

                }
            })
        }
    }
};
</script>

<style scoped>
.top {
    width: 100%;
}
.top img {
    width: 100%;
}
.loginForm {
    width: 75%;
    margin: 1rem auto;
}
.icon {
    margin: 0;
    padding: 0;
}
.inp-div {
    display: flex;
    align-items: center;
    font-size: 0.35rem;
    line-height: 1rem;
}
.icon > img {
    display: inline-block;
    width: 0.35rem;
}
.inp-box {
    flex-grow: 1;
    margin-left: 0.2rem;
    display: flex;
    position: relative;
}
.normal-inp {
    display: inline-block;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    border-bottom: 1px solid #d7d7d7;
    font-size: .3rem;
    padding-left: .15rem;
    color: #999999;
}
input::-webkit-input-placeholder {
    color: #999999;
    font-size: .25rem;
}


.getCode{
    position: absolute;
    display: inline-block;
    line-height: .4rem;
    color: #fff;
    background-color: #409eff;
    text-align: center;
    box-sizing: border-box;
    border-radius: 4px;
    outline: none;
    right: 0;
    bottom: .1rem;
    border: none;
    padding: .1rem;
}
.disbaled{
    background-color: #999;
}
.resister{
    display:block;
    width: 75%;
    line-height: .7rem;
    color: #fff;
    background-color: #409eff;
    text-align: center;
    box-sizing: border-box;
    border-radius: .2rem;
    outline: none;
    border: none;
    font-size: .3rem;
    margin: 0 auto;
}
.login{
    font-size: .25rem;
    text-align: center;
    margin-top: .3rem;

}
.login>a{
    text-decoration: none;
    color: #409eff;
}
</style>
